<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="Demo1_Function.js" type="text/javascript"></script>
    <title>Demo1</title>
</head>

<body>
    <div>
        <button onclick="sayHello();">Click me!</button>
        <p id="result">What do you say?</p>
    </div>

    <div>
        <input type="text" id="num1" size="3"> *
        <input type="text" id="num2" size="3"> =
        <span id="answer"></span>
        <br />
        <button onclick="compute();">Compute!</button>
    </div>

    <div>
        <h4>Adder</h4>
        <input type="text" id="add1" size="3"> + 
        <input type="text" id="add2" size="3"> = 
        <span id="add_answer"></span>
        <br>
        <button onclick="add();">Add!</button>
    </div>

    <div>
        <h4>Convert Name</h4>
        <input type="text" id="name" size="24"> Convert to
        <span id="covert_result"></span>
        <br>
        <button onclick="convertName();">Convert</button>
    </div>

    <div>
        <h4>Factorializer</h4>
        The factor of <input type="text" id="num" size="3"> is 
        <span id="factor"></span>
        <br>
        <button onclick="factorializer();">Compute</button>
    </div>
</body>

</html>